<template>
  <div class="user_box">
    <div class="avatar">
      <li-image :src="userInfo.avatar" class="img" />
    </div>
    <div class="info">
      <div class="acount">{{ encryptPhone(userInfo.phone) }}</div>
      <div class="tips">Hi~欢迎来到哩哩口腔，帮你更好解决口腔问题</div>
      <div class="btn_box" v-if="eidt">
        <el-upload
          :action="UPLOAD_FILE_INFO"
          :limit="1"
          :show-file-list="false"
          :headers="uploadHeaders"
          :accept="acceptFile"
          :on-success="onSuccess"
        >
          <el-button type="primary" class="btn">上传头像</el-button>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
import { UPLOAD_FILE_INFO, SAVE_PERSONAL_AVATAR } from "@/http/interface";
import { Upload } from "element-ui";
import { encryptPhone } from "@/utils/utils";
export default {
  name: "UserAvatar",
  props: {
    value: {
      type: String,
      default: "",
    },
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
    eidt: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    [Upload.name]: Upload,
  },
  watch: {
    info: {
      handler: function (n) {
        this.userInfo = n || {};
      },
      immediate: true,
    },
  },
  data() {
    return {
      UPLOAD_FILE_INFO,
      uploadHeaders: {},
      acceptFile: ".jpg,.png,.jpeg",
      userInfo: {},
      encryptPhone: (str) => {
        return encryptPhone(str);
      },
    };
  },
  created() {
    let token = this.$cookies.get("token");
    this.userInfo = this.$cookies.get("userInfo");
    this.uploadHeaders = { Authorization: token };
  },
  methods: {
    // 监听头像上传成功
    async onSuccess(res) {
      let o = this.userInfo || {};
      if (res.code != 200) {
        return false;
      }
      o.avatar = res.data;
      this.$set(this, "userInfo", o);
      this.$emit("input", res.data);
      // let msg = await this.$axios.post(SAVE_PERSONAL_AVATAR, {
      //   avatar: res.data,
      // });

      // if (msg.code == 200) {
      //   this.$cookies.set("userInfo", o);
      // }
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>